<!DOCTYPE html>
<html>
<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <style>
    </style>

    <script>
        $(function () {
            //获取url上的id
            var params = getParams();
            //获取登录的用户
            var user = JSON.parse(sessionStorage.getItem("user"));
            //判断是否有id
            if (params.id) {
                //发送请求 获取用户的信息
                $.get("/users/" + params.id, function (data) {
                    //判读是否本人 删除关注 和私信
                    if (params.id == user.id) {
                        $("#chatMessage").remove();
                        $("#fansBtn").remove();
                    }
                    //修改背景
                    $(".bg").css("background-image", "url('" + data.coverImgUrl + "')");
                    //视图渲染
                    $(".info").renderValues(data);
                });
            }

            //粉丝数和关注数查询显示
            $.get("/users/"+params.id+"/attentionsCount", function (data) {
                $(".attentions").html(data.attentions);
                $(".fans").html(data.fans);
            })

            //判断登录者是否是这个主页用户的粉丝
            $.get("/users/"+params.id+"/attention",{"fanId":user.id},function (data) {
                if(data){
                    $("#fansBtn").html("关注");
                    $("#fansBtn").attr("data-type",1);
                }else{
                    $("#fansBtn").html("取消关注");
                    $("#fansBtn").attr("data-type",0);
                }
            })

            //关注
            $("#fansBtn").click(function () {
                $("#fansBtn").attr("disabled", true);
                var type = $(this).data("type");
                console.log(type);
                var json = {};
                console.log(json);
                if(type==0){
                    $.ajax({
                        type: "post",
                        url: "/attentions",
                        data: {
                            _method:"DELETE",
                            "fan.id":user.id,
                            "attention.id":params.id
                        },
                        dataType: "json",
                        success: function (data) {
                            if(data.success){
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '取消关注成功',
                                    autoClose: 1000,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                                setTimeout(function () {
                                    window.location.reload();
                                },1000)
                            }else{
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '关注了我还想取消？取消失败',
                                    autoClose: 1000,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                            }
                        }
                    });
                }else{
                    $.ajax({
                        type: "POST",
                        url: "/attentions",
                        data: {
                            "fan.id":user.id,
                            "attention.id":params.id
                        },
                        dataType: "json",
                        success: function (data) {
                            if(data.success){
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '关注成功',
                                    autoClose: 1000,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                                setTimeout(function () {
                                    window.location.reload();
                                },1000)
                            }else{
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '你不是女粉了，关注失败',
                                    autoClose: 1000,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                            }
                        }
                    });
                }
            })

            //判断访问个人主页的访问者是谁，如果是登录者就不显示关注按钮
            if(params.id==user.id){
                $("#fansBtn").css("display","none");
            }


            //获取当前游记的总条数
            $.get("users/travel",{userId:params.id},function (data) {
                $("#travels-tab span").html(data);
            })

            //获取当前旅行单的总条数
            $.get("mytraveltable/travelCount",{userId:params.id,travelStatus : "0"},function (data) {
                $("#pills-contact-tab span").html(data);
            })

            //点击评论跳转到单独的个人评论页面
            $("#comments-tab").click(function () {
                window.location.href = "/mine/myComment.html?id=" + params.id;
            })

            //判断访问个人主页的访问者是谁，如果是登录者就不显示关注按钮
            if(params.id==user.id){
                $("#fansBtn").css("display","none");
            }

            //当前页
            var currentPage = 1;
            //总页数
            var pages;
            //是否查询的标记
            var loading = false;
            //用户存储游记的数组容器
            var travelData = [];
            //用户存储评论的数组容器
            //var commentData = [];

            //查询游记方法
            function query() {
                //如果正在查询就不继续查了,退出
                if (loading) {
                    return;
                }
                //设置为查询状态
                loading = true;
                //查询游记
                $.get("/users/" + params.id + "/travels", {currentPage: currentPage}, function (data) {
                    //把查询的数据放到容器中
                    $.merge(travelData, data.list);
                    //将容器封装到属性为list的对象中
                    var json = {list: travelData};
                    //渲染数据
                    $("#travels").renderValues(json, {
                        getHref: function (item, value) {
                            var url = $(item).data("url");
                            $(item).attr('href', url + value);
                        }
                    });

                    //当前页+1
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    //设置为没有在查询  本次查询结束
                    loading = false;
                },"json");

            }

            //查询游记方法
            function query2() {
                //如果正在查询就不继续查了,退出
                if (loading) {
                    return;
                }
                //设置为查询状态
                loading = true;
                //查询我的旅行单
                $.get("/mytraveltable/own",{userId : params.id ,currentPage: currentPage,travelStatus : "0"}, function (data) {
                    //把查询的数据放到容器中
                    $.merge(travelData, data.list);
                    //将容器封装到属性为list的对象中
                    var json = {list: travelData};
                    //获取从页面传来的数据,并且渲染
                    console.log(json);
                    $("#travelsTable").renderValues(json,{
                        getHref: function (item, value) {
                            var url = $(item).data("url");
                            $(item).attr('href', url + value);
                        }
                    });
                    //当前页+1
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    //设置为没有在查询  本次查询结束
                    loading = false;
                },"json");
            }



            //默认查询第一页
            query();

            //滚动页面 触发事件 翻页
            $(window).scroll(function () {
                //判断是否滚动到底部了  窗口的高度+文档滚动的高度 大于等于 文档的高度
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //如果当前页大于总页数就不查询了
                    if (currentPage <= pages) {
                        //查询
                        //当当前状态为游记时
                        if(status == 1){

                            query();
                        }else{
                        //当当前状态为我的旅行单时
                            query2()
                        }

                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });



            //设置ta的旅行单
            $("#pills-contact-tab").click(function (data) {
                //清空容器
                travelData = [];
                //还原当前页
                currentPage = 1;
                //设置查询的状态
                status = 0;
                //执行第一次查询
                    query2();
                })

            //昵称签名变色
            var color = ["#cc5522", "#55cc88", "#3333cc", "#dddd55"];
            var i = 0
            setInterval(function () {
                if (i >= color.length) {
                    i = 0;
                } else {
                    i++;
                }
                $("#nickName").css("color", color[i]);
            }, 300);

            //关注
            $("#fansBtn").click(function () {
                var json = {};
            })




            //给私信绑定点击事件
            $("#chatMessage").click(function () {
                window.location.href="/mine/chart.html?id="+params.id;
            });

        });
    </script>
</head>
<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <div class="col">
                <img class="rounded-circle" width="17%" render-src="headImgUrl">
            </div>
            <p class="name" render-html="nickName" id="nickName"></p>
            <p render-html="sign"></p>
            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span>1</span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span>0</span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div>
                    <button class="btn btn-outline-light ibtn" id="fansBtn">关注</button>
                    <button class="btn btn-outline-light ibtn" id="chatMessage">私信</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a role="button" class="nav-link " id="comments-tab" data-toggle="pill">
                TA的点评[<span>1</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单[<span>0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <!--TA的游记-->
        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                    <a render-fun="getHref" render-key="list.id" data-url="/travelContent.html?id=">
                        <img render-src="list.coverUrl">
                        <p><span class="title" render-html="list.title"></span>
                            <span class="span-right">
						 				<span>0</span> <i class="fa fa-thumbs-o-up"></i></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>

        <div class="comment tab-pane fade " id="comments">
        </div>

        <!--TA的旅行单-->
        <div class="tab-pane fade" id="pills-contact">
            <div id="travelsTable" >
                <dl class="list" render-loop="list">
                        <dd>
                            <a render-fun="getHref" render-key="list.id" data-url="/order.html?id=">
                                <img render-src="list.strategy.coverUrl">
                                <p><span class="title" render-html="list.strategy.title"></span>
                                    <span class="span-right">
                                            <span>0</span> <i class="fa fa-thumbs-o-up"></i></span>
                                </p>
                            </a>
                            <hr>
                        </dd>
                    </dl>
            </div>
        </div>
    </div>
</div>


</body>
</html>